<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
    />

    <title>JS+CSS实现日月交替效果</title>
    <link rel="stylesheet" href="../../libs/font-awesome.min.css">
    <link rel="stylesheet" href="index.css" />
    <script>
      function change(str) {
        document.getElementById("container").setAttribute("class", str);
      }
    </script>

    <link rel="icon" type="image/x-icon" href="../../../favicon.ico" />
</head>

  <body>
    <div class="btn-box">
      <div onclick="change('light')">
        <i class="fa fa-sun-o" aria-hidden="true"></i> 太阳
      </div>
      <div onclick="change('dark')">
        <i class="fa fa-moon-o" aria-hidden="true"></i> 月亮
      </div>
    </div>
    <div class="dark" id="container">
      <div class="bg"></div>
      <div class="moon-box">
        <div class="moon"></div>
      </div>
      <div class="sun-box">
        <div class="sun"></div>
      </div>
      <div class="sea"></div>
    </div>
  </body>
</html>
